<template>
	<view class="container">
		<image class="bg-img" src="/static/img/bg_main.png"></image>
		<view class="bg-container">
			<view class="text_title">工具助手</view>
			<!-- <view class="text_sub_title">工具助手</view> -->
		</view>
		<view class="middle-container ">
			<view v-if="roles.includes('peihuo') || roles.includes('admin')" @tap="tapDis" data-index="1"
				class="tui-flex_item_1">
				<image class="helper-img" src="/static/img/icon_helper_1.png"></image>
				<text class="middle-tag">配货助手</text>
				<image class="helper-img-go" src="/static/img/icon_helper_go1.png"></image>
			</view>
			<view v-if="roles.includes('common') || roles.includes('admin') || userInfo.userName === '12345678'"
				@tap="tapSort" data-index="1" class="tui-flex_item_1">
				<image class="helper-img" src="/static/img/icon_helper_1.png"></image>
				<text class="middle-tag">分拣助手</text>
				<image class="helper-img-go" src="/static/img/icon_helper_go1.png"></image>
			</view>
			<view v-if="roles.includes('ywy') || roles.includes('admin')" @tap="tapBusiness" class="tui-flex_item_2">
				<image class="helper-img" src="/static/img/icon_helper_2.png"></image>
				<text class="middle-tag">业务助手</text>
				<image class="helper-img-go" src="/static/img/icon_helper_go2.png"></image>
			</view>
			<view v-if="roles.includes('sj') || roles.includes('admin')" @tap="tapDriver" class="tui-flex_item_3">
				<image class="helper-img" src="/static/img/icon_helper_3.png"></image>
				<text class="middle-tag">司机助手</text>
				<image class="helper-img-go" src="/static/img/icon_helper_go3.png"></image>
			</view>

			<view v-if="roles.includes('caigou') || roles.includes('admin')" @tap="tapProcurement"
				class="tui-flex_item_1" style="margin-top: 32rpx;">
				<image class="helper-img" src="/static/img/icon_helper_1.png"></image>
				<text class="middle-tag">采购助手</text>
				<image class="helper-img-go" src="/static/img/icon_helper_go1.png"></image>
			</view>
			<view v-if="roles.includes('supplier') || roles.includes('admin')" @tap="tapSupplier"
				class="tui-flex_item_2">
				<image class="helper-img" src="/static/img/icon_helper_2.png"></image>
				<text class="middle-tag">商家助手</text>
				<image class="helper-img-go" src="/static/img/icon_helper_go2.png"></image>
			</view>
			<view class="tui-clock" @tap="logOut()">

				<button class="tui-button-primary" hover-class="tui-button-hover" type="primary">退出登录</button>

			</view>

		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex'
	import cookie from '@/utils/store/cookie'
	import {
		getUserInfo
	} from '../../apis/user'
	export default {
		data() {
			return {

			}
		},
		computed: mapGetters(['roles', 'userInfo']),
		onLoad() {
			getUserInfo().then(res => {
				// console.log(res)

			})
		},
		methods: {
			tapSort: function() {
				this.$yrouter.push({
					path: '/pages/sort/index'
					// path: '/pages/distribution/index'
				})

			},
			tapDis() {
				this.$yrouter.push({
					path: '/pages/distribution/index'
				})
			},
			tapBusiness: function() {
				this.$yrouter.push({
					path: '/pages/business/businessHelper/index'
				})

			},
			tapDriver: function() {
				this.$yrouter.push({
					path: '/pages/driver/driverHelper/index'
				})

			},
			tapProcurement() {
				this.$yrouter.push({
					path: '/procurement/index/index'
				})
			},
			tapSupplier() {
				this.$yrouter.push({
					path: '/supplier/index/index'
				})
			},
			logOut: function() {
				this.$store.commit('logout')
				getUserInfo().then(res => {
					// console.log(res)

				})
			}
		},
		//页面相关事件处理函数--监听用户下拉动作
		onPullDownRefresh: function() {
			console.log("index onPullDownRefresh")

		},
	}
</script>
<style>
	.container {
		width: 100%;
		padding: 30rpx;

	}

	.bg-container {
		height: 243rpx;
		position: relative;
		display: flex;
		top: 60rpx;
		left: 70rpx;
		flex-direction: column;
	}

	.middle-container {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		/* z-index: 2; */
	}

	.tui-flex {
		position: relative;
		display: -webkit-box;
		display: -webkit-flex;
		top: 0;
		left: 0;
	}

	.tui-flex_item_1 {
		width: 100%;
		height: 182rpx;
		display: flex;
		align-items: center;
		border-radius: 24rpx;
		background: linear-gradient(to right, #FBFFFD, #EAFCF5);
	}

	.tui-flex_item_2 {
		width: 100%;
		height: 182rpx;
		display: flex;
		align-items: center;
		margin-top: 32rpx;
		border-radius: 24rpx;
		background: linear-gradient(to right, #EFFAFE, #E9F4FC);
	}

	.tui-flex_item_3 {
		width: 100%;
		height: 182rpx;
		display: flex;
		align-items: center;
		margin-top: 32rpx;
		border-radius: 24rpx;
		background: linear-gradient(to right, #FFFEFA, #FDF8EA);
	}

	.bg-img {
		position: absolute;
		z-index: -1;
		left: 0;
		right: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 100%;
	}

	.text_title {
		font-size: 56rpx;
		color: #fff;
	}

	.text_sub_title {
		font-size: 30rpx;
		color: #fff;
		margin-top: 6rpx;
	}

	.middle-tag {
		font-size: 36rpx;
		color: #333333;
		line-height: 36rpx;
		font-weight: bold;
		padding-left: 22rpx;

	}

	.helper-img {
		width: 80rpx;
		height: 78rpx;
		margin-left: 56rpx;
	}

	.helper-img-go {
		position: absolute;
		right: 48rpx;
		width: 40rpx;
		height: 40rpx;
		align-items: center;
	}

	.tui-clock {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 100rpx;
		z-index: 999;
		padding: 20rpx 25rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>